
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./cesium/Cesium1.98/Widgets/widgets.css" />
    <script type="text/javascript" src="./cesium/Cesium1.98/Cesium.js"></script>
</head>

<body style="
      margin: 0;
      overflow: hidden;
      background: #fff;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
    ">
    <div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>

    <script type="text/javascript">
        Cesium.Ion.defaultAccessToken =
            "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M";
        const viewer = new Cesium.Viewer("map", {});
        viewer.scene.debugShowFramesPerSecond = true;
        viewer.scene.globe.depthTestAgainstTerrain = true;


        const boxGeometry = Cesium.BoxGeometry.fromDimensions({
            vertexFormat: Cesium.VertexFormat.POSITION_NORMAL_AND_ST,
            dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
        })
        const boxModelMatrix = Cesium.Matrix4.multiplyByTranslation(
            Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-100, 35)),
            new Cesium.Cartesian3(0.0, 0.0, 500000 * 0.5),
            new Cesium.Matrix4()
        )
        const boxGeometryInstance = new Cesium.GeometryInstance({
            geometry: boxGeometry,
            modelMatrix: boxModelMatrix,
        })

        const shader = `czm_material czm_getMaterial(czm_materialInput materialInput) {
            czm_material material = czm_getDefaultMaterial(materialInput);
            material.diffuse = vec3(0.8, 0.2, 0.1);
            material.specular = 3.0;
            material.shininess = 0.8;
            material.alpha = 0.6;
            return material;
        }`
        const appearance = new Cesium.MaterialAppearance({
            material: new Cesium.Material({
                fabric: {
                    source: shader
                }
            }),
        })

        viewer.scene.primitives.add(
            new Cesium.Primitive({
                geometryInstances: boxGeometryInstance,
                appearance: appearance,
            })
        )

    </script>
</body>

</html>